说明
通过 全屏 API
可以进入全屏模式使用整个屏幕为用户展现整个页面或页面中一部分,并且可以随时退出全屏模式。
在全屏模式下,同时也会浏览器以外的其他应用。
API
document.fullscreenEnabled
属性
此属性表示是否可以启用全屏模式。
Element.requestFullscreen()
方法
将当前元素及其后代为全屏模式,返回一个 Promise
,在完全进入全屏模式后会变为 resolved
状态。
注意 由于调用
requestFullscreen
方法的元素的祖先元素都不再被渲染,故祖先元素的背景等样式也不再生效,如果用户在黑暗模式下且元素未设置背景,则背景可能会被渲染为黑色。
document.exitFullscreen()
方法
从全屏模式切换到窗口模式,此方法会返回一个 Promise
,会在完全退出全屏时变为 resolved
状态。
但如果调用时不为全屏模式,则会直接变为 rejected
状态。
document.fullscreenElement
/ ShadowRoot.fullscreenElement
属性
document 或 ShadowRoot 上存在此属性,表示当前被全屏的元素,如果其后代元素中不存在全屏元素,则为 null
。
注意 如果被全屏元素在后代的 shadow DOM 中,此属性为 shoadow 对应的后代。
fullscreenchange
事件
此事件为冒泡事件、不可被取消。
当全屏状态发生改变时,触发此事件
fullscreenerror
事件
此事件为冒泡事件、不可被取消。
当改变全屏状态发生错误时,触发此事件